<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<!--容器-->
<div id="root">
    <h1>{{person}}</h1>
</div>


<script type="text/javascript">
    //关闭提示
    Vue.config.productionTip = false;
    var v = new Vue({
        //1.data：对象式写法
        // data: {
        //     // el: '#root',
        //
        //     // person: {
        //     //     name: '向妙',
        //     //     sex: '女',
        //     //     bir: '2000-04-14',
        //     //     address: '张家界桑植县xxxxxx'
        //     // }
        //     //2.data：函数式写法
        // },
        data: function () {//不能写箭头函数
            console.log(this);//此处的this是Vue实例对象
            return {
                person: {
                    name: '向妙',
                    sex: '女',
                    bir: '2000-04-14',
                    address: '张家界桑植县xxxxxx'
                }
            };
        }
    });
    console.log(v);

    //定时关联,挂载
    setTimeout(() => {
        //挂载
        v.$mount('#root')
    }, 1000 * 3);
</script>
</body>
</html>